import axios from "axios"
import "./onlineDevelopmentModeDetails.less"

const OnlineDevelopmentModeDetails = (props) => {
  const { useState, useEffect } = window.React
  const configJson = require("../../../pluginTemp/config.json")
  const information = require("../../../scripts/information.json")
  const ipAdress = information.ipAdress
  const [tips, setTips] = useState("")
  const [fontsClass, setFontsClass] = useState("normal")
  useEffect(() => {
    let port = window.location.port
    if (!configJson["online-development-mode"].host) {
      setTips("主机名不存在，请检查host字段")
      setFontsClass("error")
      return
    }
    if (!configJson["online-development-mode"].port) {
      setTips("端口号不存在，请检查port字段")
      setFontsClass("error")
      return
    }
    if (!configJson["online-development-mode"].entry) {
      setTips("入口文件不存在，请检查entry字段")
      setFontsClass("error")
      return
    }
    if (configJson["online-development-mode"].port !== port) {
      setTips("config.json中端口号与当前启动不一致，请确保线上调试包端口正确，否则请修改port字段并重新打包上传")
      setFontsClass("warning")
      return
    }
    let host = ["http://localhost", "http://0.0.0.0", `http://${ipAdress}`]
    let hostFlag = 0
    const getEntryJs = async (hostFlag) => {
      try {
        await axios.get(`${host[hostFlag]}:${configJson["online-development-mode"].port}/${configJson["online-development-mode"].entry}`)
        setTips("功能正常，请打开线上地址调试")
        setFontsClass("normal")
      } catch (e) {
        if (hostFlag == 2) {
          setTips("找不到入口文件，请检查online-development-mode下所有字段是否准确")
          setFontsClass("error")
          return
        }
        hostFlag++
        getEntryJs(hostFlag)
      }
    }
    getEntryJs(hostFlag)
  }, [])
  return (
    <div className="OnlineDevelopmentModeDetails">
      <div className="tips">
        <div className={fontsClass}>{tips}</div>
      </div>
    </div>)
}

export default OnlineDevelopmentModeDetails
